import React, { useEffect, useState } from 'react';
import { useHistory, useParams, useLocation, useRouteMatch } from 'react-router-dom'
import * as api from './server'
import { Toast,NavBar} from 'antd-mobile';
import dayjs from './day';

const Topic = () => {
  // console.log(props)
  const { id } = useParams();
  const history=useHistory();
  const [topic, setTopic] = useState({});
  useEffect(() => {
    api.getTopic(id)
      .then(res => {
        setTopic(res.data);
      })
  }, [])
  const createTopic = () => {
    // 发布主题
    api.createTopic({
      accesstoken: 'e73b268b-f5d2-4ff1-8fd9-3581b84962e2',
      title: 'hello',
      tab: 'dev',
      content: '<h2>测试</h2>'
    })
      .then(res => {
        if (res.success) {
          Toast.show({
            icon: 'success',
            content: '发布成功',
          })
          // console.log('发布成功')
        }
      })
      .catch((err) => {
        Toast.show({
          icon: 'fail',
          content: err.response.data.error_msg,
        })
        // console.dir(err.response.data.error_msg)
      })
  }

  const createCollect = () => {
    // 收藏主题
    api.createCollect({
      accesstoken: 'e73b268b-f5d2-4ff1-8fd9-3581b84962e2',
      topic_id: id
    })
      .then(res => {
        console.log('收藏成功!')
      })
  }

  const delCollect = () => {
    // 取消收藏
    api.delCollect({
      accesstoken: 'e73b268b-f5d2-4ff1-8fd9-3581b84962e2',
      topic_id: id
    })
      .then(res => {
        console.log('取消收藏!')
      })
  }

  return (
    <div>
      {/* <Link to={'/collect'} >收藏列表</Link> */}
      <button onClick={createTopic}>发布主题</button>
      <button onClick={createCollect}>收藏主题</button>
      <button onClick={delCollect}>取消收藏</button>

      <h2>{topic.title}</h2>
      <h3>发布于{dayjs(topic.create_at).fromNow()}</h3>
      <NavBar onBack={history.goBack} >帖子详情</NavBar>
      <div dangerouslySetInnerHTML={{ __html: topic.content }}></div>
    </div>
  );
};

export default Topic;
